<template>
  <div>
    <!-- 标题 -->
    <div class="header">
      <div class="header-box">
        <div class="header-l">
          <van-icon name="arrow-left" />
          <span @click="backTo">返回</span>
        </div>

        <h2 class="header-m" >分类</h2>
        <div></div>
      </div>
    </div>
    <van-tabs @click="act" v-model="active" class="name">
      <van-tab v-for="item in nav.navData" :key="item.id" :title="item.name">
        <div class="box">
        <span class="txt-t">{{ item.name }}</span>
        <span class="txt-b">{{ item.front_desc }}</span>

        </div>
      </van-tab>
    </van-tabs>

    <div class="goods">
      <ul class="goodsList">
        <li class="goodsList-item" v-for="item in goods.data" :key="item.id" @click="toGoodsDetail(item.id)">
          <img class="img" :src="item.list_pic_url" alt="" />
          <div class="goods-txt">
            <span class="txt-t">{{ item.name }}</span>
            <span class="txt-b">${{ item.retail_price }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { categoryNav, goodsList } from "@/api/cartGory";

export default {
  name: "",
  data() {
    return {
      id: "",
      nav: [],
      active: "",
      goods: "",
    };
  },

  async mounted() {
    this.id = this.$route.query.id;
    let a = await categoryNav({ id: this.id });
    console.log(a);
    this.nav = a;
    let idx = a.navData.findIndex((el) => el.id == this.id);
    this.active = idx;
    let b = await goodsList({ categoryId: this.id });
    console.log(b);
    this.goods = b;
  },
  methods: {
    backTo() {
      this.$router.back();
    },
    async act(na, val) {
      console.log(na, val);
      let a = await categoryNav({ id: this.id });
      this.id = a.navData[na].id;
      let b = await goodsList({ categoryId: this.id });
      this.goods = b;
    },
    toGoodsDetail(id){
      this.$router.push({ path: "/home/goodsDetail", query: { id: id } });

    }
  },
};
</script>

<style lang="scss" scoped>
@import "./scss/index.scss";
</style>>
